<script>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import request from '@/utils/request.js';

export default {
  name: 'Novels',
  setup() {
    const novels = ref([]);
    const categories = ref([]); // 存储类别数据
    const router = useRouter();
    const formInline = ref({
      titleOrAuthor: '',
      category: null,
      publishTime: null
    });
    const total = ref(0);
    const pageSize = ref(10);
    const currentPage = ref(1);
    const hasData = ref(false);

    const getCategories = async () => {
      try {
        const response = await request.get('/category');
        if (response.code === 1) {
          categories.value = response.data.map(item => ({ id: item.id, name: item.name }));
        } else {
          console.error(response.msg || '获取类别列表失败');
        }
      } catch (error) {
        console.error('服务异常');
      }
    };

    const getNovels = async (params = {}) => {
      try {
        const response = await request.get('/novel/page', { params: { ...params, status: 2 } });
        if (response.code === 1) {
          novels.value = response.data.list;
          total.value = response.data.totals;
          hasData.value = response.data.totals > 0;
        } else {
          console.error(response.msg || '获取小说列表失败');
        }
      } catch (error) {
        console.error('服务异常');
      }
    };

    const handleViewDetail = (row) => {
      router.push({ name: 'NovelDetail', params: { id: row.id } });
    };

    const onSubmit = () => {
      getNovels({
        titleOrAuthor: formInline.value.titleOrAuthor,
        category: formInline.value.category,
        publishTime: formInline.value.publishTime,
        pageSize: pageSize.value,
        currentPage: currentPage.value
      });
    };

    const handleSizeChange = (val) => {
      pageSize.value = val;
      onSubmit();
    };

    const handleCurrentChange = (val) => {
      currentPage.value = val;
      onSubmit();
    };

    onMounted(() => {
      getCategories();
      getNovels();
    });

    return {
      novels,
      categories,
      handleViewDetail,
      formInline,
      onSubmit,
      total,
      pageSize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,
      hasData
    };
  }
};
</script>

<template>
  <div class="novels-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="标题或作者">
        <el-input v-model="formInline.titleOrAuthor" placeholder="请输入标题或作者" clearable />
      </el-form-item>
      <el-form-item label="类别">
        <el-select v-model="formInline.category" placeholder="请选择类别" clearable style="width: 200px;">
          <el-option v-for="category in categories" :key="category.id" :label="category.name" :value="category.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="出版时间">
        <el-select v-model="formInline.publishTime" placeholder="请选择或输入出版时间" clearable filterable style="width: 200px;">
          <el-option v-for="year in Array.from({ length: 110 }, (_, i) => new Date().getFullYear() - i)" :key="year" :label="year" :value="year.toString()" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="novels" style="width: 100%; margin-top: 20px;" v-if="hasData">
      <el-table-column prop="title" label="标题" width="180"></el-table-column>
      <el-table-column prop="avatar" label="封面">
        <template #default="scope">
          <img :src="scope.row.avatar" alt="封面" style="width: 50px; height: 50px;">
        </template>
      </el-table-column>
      <el-table-column prop="authorName" label="作者" width="100"></el-table-column>
      <el-table-column prop="category" label="类别" width="100"></el-table-column>
      <el-table-column prop="publishTime" label="发布日期"></el-table-column>
      <el-table-column prop="rating" label="评分" width="100"></el-table-column>
      <el-table-column prop="commentCount" label="评论数" width="100"></el-table-column>
      <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="300">
        <template #default="scope">
          <el-button size="mini" @click="handleViewDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-else style="text-align: center; margin-top: 20px;">
      <p>暂无相关数据</p>
    </div>

    <div class="example-pagination-block" style="margin-top: 20px;" v-if="hasData">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>

<style scoped>
.novels-container {
  padding: 20px;
}

.demo-form-inline .el-input, .demo-form-inline .el-select {
  --el-input-width: 220px;
}

.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
</style>